<template>
  <div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
            <open-data type="userAvatarUrl" lang="zh_CN"></open-data>
          </div>
          <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
            <div class="weui-media-box__title">
              <open-data type="userNickName" lang="zh_CN"></open-data>
            </div>
            <div class="weui-media-box__desc btn">
              <button size="mini" @click="handleLogout">退出</button>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd">我的订单</div>
      <div class="weui-panel__bd">
        <navigator v-for="(item, index) in orders" :key="index" :url="'/pages/preview/main?orderId=' + item.id" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
          <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
            <image class="weui-media-box__thumb" :src="CDN + '/products/' + item.product.covers[0]" />
          </div>
          <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
            <div class="weui-media-box__title">{{ item.product.name }}</div>
            <div class="weui-media-box__desc">预约时间: {{ item.appointmentStr }}</div>
            <div class="weui-media-box__desc">描述: {{ item.product.description }}</div>
            <div class="weui-media-box__desc">状态: {{ item.statusStr }}</div>
          </div>
        </navigator>
      </div>
      <div class="weui-panel__ft">
        <div class="weui-cell weui-cell_access weui-cell_link">
          <div class="weui-cell__bd">查看更多</div>
          <div class="weui-cell__ft weui-cell__ft_in-access"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QueryOrders from '@/graphql/Query/Orders.graphql'
import { formatTime } from '@/utils'

export default {
  data () {
    return {
      orders: [],
      CDN: this.$CDN
    }
  },

  onLoad () {
    /* this.$apollo.query({
      query: QueryOrders
    })
      .then(result => {
        console.log(result)
        this.orders = result.data.orders
        for (let i in this.orders) {
          this.orders[i].appointmentStr = formatTime(new Date(this.orders[i].appointment))
          this.orders[i].statusStr = '已预约'
        }
      })
      .catch(error => {
        console.log(error)
      }) */
    this.queryData()
  },
  onPullDownRefresh () {
    this.queryData(true)
  },

  methods: {
    formatDate (date) {
      return formatTime(new Date(date))
    },
    handleLogout () {
      wx.showModal({
        title: '是否退出平台',
        confirmText: '确定',
        cancelText: '取消',
        success: function (res) {
          // console.log(res)
          if (res.confirm) {
            // console.log('用户点击主操作')
            wx.removeStorageSync('token')
            wx.removeStorageSync('user')
            const url = `../index/main`
            wx.reLaunch({ url })
          } else {
            // console.log('用户点击辅助操作')
          }
        }
      })
    },
    queryData (isFetch) {
      this.$apollo.queryLoading({
        query: QueryOrders,
        fetchPolicy: (isFetch) ? 'network-only' : 'cache-first'
      }, result => {
        // console.log(result)
        this.orders = result.data.orders
        for (let i in this.orders) {
          this.orders[i].appointmentStr = formatTime(new Date(this.orders[i].appointment))
          this.orders[i].statusStr = '已预约'
        }
        wx.stopPullDownRefresh()
      }, () => {
        // console.log(error)
        wx.stopPullDownRefresh()
      })
    }
  }

  /* filters: {
    formatDate (date) {
      return formatTime(new Date(date))
    }
  } */
}
</script>

<style>
.btn {
  text-align: right;
}
</style>
